<template>
  <div class="province-analysis-radar">
    <CommonChart :options="chartOptions" height="100%" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from "vue"
import type { EChartsOption } from "echarts"
import { CommonChart } from "@/components"
import { colorManager } from "@/utils/colorMap"
import { getProvinceScoreDataApi } from "@/interface"

interface Props {
  provinces: string[]
}

const props = defineProps<Props>()

// 模拟数据获取
const analysisData = ref<any>(null)

const filteredProvinceTrends = computed(() => {
  if (props.provinces.length === 0) {
    return analysisData.value?.provinces || []
  }

  return analysisData.value.provinces.filter((item: any) => {
    // 获取省份名称（去掉"省"或"市"后缀）
    const provinceName = item.name.replace(/[省市]$/, "")
    // 检查是否在选中的省份列表中
    return props.provinces.some(selectedProvince => selectedProvince === provinceName || selectedProvince === item.name)
  })
})

const chartOptions = computed<EChartsOption>(() => {
  if (!analysisData.value) return {}

  // 雷达图指标配置
  const indicators = [
    {
      name: "GDP",
      max: 100,
      tooltip: {
        show: true,
        formatter: "地区生产总值，反映该省经济发展水平"
      }
    },
    {
      name: "就业率",
      max: 100,
      tooltip: {
        show: true,
        formatter: "该省高校毕业生就业率，反映就业机会和前景"
      }
    },
    {
      name: "收入水平",
      max: 100,
      tooltip: {
        show: true,
        formatter: "该省平均工资水平，反映居民收入状况"
      }
    },
    {
      name: "生活成本",
      max: 100,
      tooltip: {
        show: true,
        formatter: "包括房价、物价等综合生活成本指标"
      }
    },
    {
      name: "教育资源",
      max: 100,
      tooltip: {
        show: true,
        formatter: "高校数量、质量等教育资源综合评分"
      }
    }
  ]

  // 根据选中省份筛选数据
  // const selectedProvinces = analysisData.value.provinces.filter((p: any) => props.provinces.includes(p.name))
  const selectedProvinces = filteredProvinceTrends.value

  // 生成雷达图系列数据
  const series = [
    {
      type: "radar",
      name: "全国平均",
      data: [
        {
          value: [
            analysisData.value.national.GDP,
            analysisData.value.national.employment,
            analysisData.value.national.income,
            analysisData.value.national.livingCost,
            analysisData.value.national.education
          ],
          name: "全国平均",
          areaStyle: {
            opacity: 0.2 // 由于数据多，降低透明度避免太乱
          }
        }
      ]
    },
    ...selectedProvinces.map((province: any) => ({
      type: "radar",
      name: province.name,
      data: [
        {
          value: [
            province.scores.GDP,
            province.scores.employment,
            province.scores.income,
            province.scores.livingCost,
            province.scores.education
          ],
          name: province.name,
          itemStyle: {
            color: colorManager.getColor(province.name)
          },
          lineStyle: {
            color: colorManager.getColor(province.name)
          },
          areaStyle: {
            opacity: 0.2 // 由于数据多，降低透明度避免太乱
          }
        }
      ]
    }))
  ]

  return {
    title: {
      text: "省份综合评分",
      left: "start",
      subtext: "各项指标均已标准化为0-100分",
      subtextStyle: {
        fontSize: 10
      }
    },
    tooltip: {
      trigger: "item",
      formatter: (params: any) => {
        if (params.data) {
          return `${params.name}<br/>
            GDP: ${params.data.value[0]}<br/>
            就业率: ${params.data.value[1]}<br/>
            收入水平: ${params.data.value[2]}<br/>
            生活成本: ${params.data.value[3]}<br/>
            教育资源: ${params.data.value[4]}`
        }
        return ""
      }
    },
    legend: {
      type: "scroll",
      top: 0,
      right: "0%",
      width: "40%",
      pageIconSize: 10,
      pageTextStyle: {
        color: "#666"
      },
      data: [
        {
          name: "全国平均",
          itemStyle: {
            color: "#409EFF"
          }
        },
        ...filteredProvinceTrends.value.map((item: any) => ({
          name: item.name,
          itemStyle: {
            color: colorManager.getColor(item.name)
          }
        }))
      ]
    },
    radar: {
      indicator: indicators,
      center: ["50%", "60%"],
      // radius: "65%",
      splitNumber: 4,
      // shape: "circle",
      axisName: {
        color: "#999",
        fontSize: 12
      },
      splitArea: {
        areaStyle: {
          color: ["#f5f5f5", "#e6e6e6"]
        }
      },
      axisLine: {
        lineStyle: {
          color: "#ddd"
        }
      },
      splitLine: {
        lineStyle: {
          color: "#ddd"
        }
      }
    },
    series
  }
})

onMounted(() => {
  getProvinceScoreDataApi().then(res => {
    analysisData.value = res.data
  })
})
</script>

<style scoped>
.province-analysis-radar {
  width: 100%;
  height: 100%;
}
</style>
